<template>
    <div>
        <div>
            <div style="margin:15px;padding:20px;background:#fff;border:1px solid #ddd">
                <el-row :gutter="24">
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">开始时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="开始时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">结束时间</div>
                            <el-date-picker
                                class="el-cascader-margin w-100p"
                                v-model="value1"
                                type="date"
                                placeholder="结束时间">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="10" class="text-left">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <el-button type="text">今天</el-button>
                            <el-button type="text">7天</el-button>
                            <el-button type="text">15天</el-button>
                            <el-button type="text">30天</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="24" style="margin-top:20px;margin-bottom:20px">
                    <el-col :span="14">
                        <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                            <div class="el-input-group__prepend" tabindex="-1">门店</div>
                            <el-cascader placeholder="请选择门店" class="el-cascader-margin w-100p"  size="medium"
                                        :options="treeData"
                                        :show-all-levels="false"
                                        change-on-select>
                            </el-cascader>
                        </div>
                    </el-col>
                    <el-col :span="10" class="text-left">
                        <div>
                            <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                            <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">导出</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-row :gutter="20" class="center-center" style="padding:20px 0;margin:15px;border:1px solid #ddd;background:#fff">
                <el-col :span="2" class="tabBox">
                        <div>应收</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>实收</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox" style="display:flex">
                    <div>
                        <div>外卖结算金额</div>
                        <div>0.00</div>
                    </div>
                        <div style="position:relative;height:10px;width:10px;top:0px;right:-2px">
                            <el-tooltip class="item" effect="dark" placement="right-start">
                                <div slot="content">因结算金额涉及多种场景（配送追加小费、餐损赔付、公益捐款信息等），此处结算金额仅作参考，<br/>结算金额以外卖平台为准。建议您通过商家端对账模块查询。</div>
                                <i class="el-icon-question" style="color:rgb(1,108,223)"></i>
                            </el-tooltip>

                        </div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>优免</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>挂账金额</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>赠菜</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>服务费</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>总人数</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>总单数</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>单均消费</div>
                        <div>0.00</div>
                </el-col>
                <el-col :span="2" class="tabBox">
                        <div>人均消费</div>
                        <div>0.00</div>
                </el-col>
            </el-row>
            <div style="padding:20px 10px;margin:15px;border:1px solid #ddd;background:#fff">
                <div class="text-left" style="margin-bottom:20px">
                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search">导出</el-button>
                </div>
                <el-row :gutter="20">
                    <el-col :span="24">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        :border="true"
                        style="width: 100%">
                        <el-table-column
                        type="index"
                        fixed
                        width="50">
                        </el-table-column>
                        <el-table-column
                                label="机构名称"
                                fixed>
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="应收">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="实收">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="服务费">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="商品收入">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                            <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="外卖结算金额">
                            <div style="width:10px;height:10px;background:red"></div>
                            <el-table-column label="美团">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="饿了么">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="优免">
                            <el-table-column label="全单折">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="方案折">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员折">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="商品折">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="套餐优惠">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="免单">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="赠送商品">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="自动抹零">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="手动抹零">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员价">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员储值赠送消费">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员积分抵现">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="优惠券优免">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="团购券优免">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="红包抵现">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="外卖优免">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="预点餐优免">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="现金">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="刷卡">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员主账户消费">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="优惠券">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="团购券">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="挂账">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="支付宝">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="微信">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="第三方支付">
                            <el-table-column label="第三方">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="美团点评预点餐">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="消费人数">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="人均消费">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="结账单数">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="单均消费">
                            <template  slot-scope="scope">
                                <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                <span v-else>----</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="其他收款">
                            <el-table-column label="会员充值">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="会员退款">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="挂账收款">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="挂账减免">
                                <template  slot-scope="scope">
                                    <span v-if="scope.row.parentName">{{scope.row.parentName}}</span>
                                    <span v-else>----</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    </el-col>
                </el-row>
                <br>
                <div class="block">
                    <el-row>
                        <el-col :span="24" class="text-right">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import model from "./model.vue";
export default {
  data() {
    return {

      pageSizes: window.pageSizes, //所有可选择的条数
      pageSize: window.pageSize, //控制一页显示的条数
      total: 10, //总条数
      input: "",
      currentPage: 1,
      addShow: false
    };
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    addSuccess(item) {
      this.addShow = false;
      this.initData();
    },
    addClose() {
      this.addShow = false;
    }
  },
  components: {
    model
  }
};
</script>

<style scoped>
.tabBox{
    border-right:1px solid #ccc;
}
</style>
